<template>
	<view class="app">
		<main class="main">
			<view class="bgc" :style="{backgroundImage:`url(${url1})`}">
				<view class="btnleft" @click="left"></view>
				<view class="btnright" @click="right"></view>
			</view>
			<view class="btnbox">
				<button class="btn" @click="sure">确定</button>
			</view>
			<view class="imageselector">
				<view class="progress" :style="{width:scroll+'%'}"></view>
				<scroll-view @scroll="update" scroll-x="true" class="container" scroll-with-animation>
					<view class="grid">
							<view class="item" @click="selected(index)" :class="{'active':celectimg===index,'inactive':celectimg!=index}" v-for="(url,index) in list" :key="index" :style="{backgroundImage:`url('${url}')`}"></view>
					</view>
				
				</scroll-view>
			</view>
		</main>
	
	</view>
</template>

<script>

	export default{
		data(){
			return{
				boxwidth:0,
				scroll:0,
				add:false,
				celectimg: 0,
				change:false,
				url1:'/static/1.jpg',
				list:[
					'/static/1.jpg',
					'/static/2.jpg',
				    '/static/3.jpg',
					'/static/4.jpg',
					'/static/5.jpg'
				]
			}
		},
		methods:{
			update(e){
				this.scroll=(e.detail.scrollLeft/(e.detail.scrollWidth-this.boxwidth))*100
			
			},
			selected(index){
				this.celectimg=index
				this.url1=this.list[index]
				console.log(index);
				this.scroll=((index+1)/(this.list.length))*100
				console.log(this.scroll);
				try{//实现点击带动滚动
					const q=uni.createSelectorQuery().in(this)
					q.select('.container').boundingClientRect((react)=>{
						if(react){
							console.log(react);
							// react.scrollTo({
							// 	scrollLeft:this.boxwidth*((index+1)/(this.list.length)),
							// 	duration:300
							// })
						}
					})
				}catch(error){
					console.log(error);
				}
				
			},
			left(){
				if(this.celectimg>0){
					this.celectimg--
				this.selected(this.celectimg)
				}

			},
			right(){
				if(this.celectimg<this.list.length-1){
					this.celectimg++
					this.selected(this.celectimg)
					
				}
			},
			sure(){
				if(this.url1!=''){
				uni.showToast({
					title:'保存成功',
					mask:true,
					position:'center',
					duration:2000
				})	
				this.change=true
				}
			}
		},
		onReady(){//onready在mounted之后
			const q=uni.createSelectorQuery().in(this)
			q.select('.container').boundingClientRect((react)=>{
				if(react){
					this.boxwidth=react.width
					console.log(react);
				}
			})
			.exec();
		},
		onUnload(){//传递选中照片给self组件
		if(this.change){
			const eventchannel=this.getOpenerEventChannel();
			eventchannel.emit('acceptData',{data:this.url1})
		}
			
		}
	}
			
		
	
</script>

<style scoped>
.app{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}
.main{
	position: absolute;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	top:100rpx
}
.btnleft{
	width: 80rpx;
	height: 80rpx;
	background-color:rgba(217, 217, 217, 0.5);
	border-radius: 50%;
	transition: all 0.5s ease;
}
.btnright{
	width: 80rpx;
	height: 80rpx;
	background-color:rgba(217, 217, 217, 0.5);
	border-radius: 50%;	
	transition: all 0.5s ease;
}
.btnleft:active{
	background-color:#666666 ;
	transform: scale(1.1);
}
.btnright:active{
	background-color:#666666 ;
	transform: scale(1.1);
}
.bgc{
	width: 500rpx;
	height: 500rpx;
	background-color: antiquewhite;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.btnbox{
	width: 100%;
	display: flex;
	margin-top: 30rpx;
}
.btn{
	width: 40%;
	line-height: 30rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	border-radius: 15rpx;
	 background-color: #409EFF;
	 color: white;
	 transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn:active{
	 background-color: #3a8ee6;
	 transform: translateY(-10rpx);
	 box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.15);
}
.progress{
	height: 4rpx;
	position: absolute;
	top: 0;
	left: 0;
	background-color:  #409EFF;
	transition:width 0.3s ease;
    
}
.imageselector{
	position: relative;
	width: 80%;
	margin-top: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
margin-bottom: 40rpx;
	}
.container{
	width: 100%;
	margin-top: 10rpx;
}
.grid{
	display: flex;
	gap:16rpx;
	overflow-x: auto;
	min-width: max-content;
	display: flex;
	justify-content: center;
	align-items: center;
}
.item{
	width: 200rpx;
	height: 250rpx;
	 min-width: 200rpx;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 16rpx;
	transition: all 0.3s;
}
.item.active{
	transform: scale(1.1);
	border: 2rpx solid #3B82F6;
	z-index: 10;
}
.item.inactive{
	transform: scale(0.9);
}
@media (min-width: 768px) {
  .bgc {
    width: 600rpx;
    height: 600rpx;
  }
  
  .item {
    width: 250rpx;
    height: 300rpx;
  }
  
  .btnleft, .btnright {
    width: 100rpx;
    height: 100rpx;
  }
}
@media (min-width: 992px) {
  .main {
    padding-top: 50rpx;
  }
  
  .bgc {
    width: 700rpx;
    height: 700rpx;
  }
  
  .grid {
    gap: 30rpx;
  }
  
  .item {
    width: 300rpx;
    height: 350rpx;
  }
  
  .btn {
    width: 30%;
    max-width: 400rpx;
    line-height: 100rpx;
    font-size: 36rpx;
  }
}
@media (min-width: 1200px) {
  .imageselector {
    max-width: 1000rpx;
  }
}
</style>
